<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'gantt-basic'">
    <div class="devui-demo-title">{{ 'components.gantt.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      <ul style="list-style: inside">
        <li>{{ 'components.gantt.basicDemo.description1' | translate }}</li>
        <li>
          {{ 'components.gantt.basicDemo.description2' | translate }}
        </li>
        <li>
          {{ 'components.gantt.basicDemo.description3' | translate }}
        </li>
        <li>{{ 'components.gantt.basicDemo.description4' | translate }}</li>
      </ul>
    </div>
    <d-codebox id="basic" [sourceData]="basicSource">
      <d-basic demo></d-basic>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'gantt-in-datatable'">
    <div class="devui-demo-title">{{ 'components.gantt.withDataDemo.title' | translate }}</div>
    <d-codebox id="inTable" [sourceData]="inTableSource">
      <d-table-gantt demo></d-table-gantt>
    </d-codebox>
  </div>
</div>
